<template>
  <div class="app-main">
    <a-card :bordered="false" style="margin-bottom: 10px">
      <div class="table-page-search-wrapper" style="position: relative">
        <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="封堵范围">
                <a-range-picker v-model="rangTime" allowClear style="width:100%;" format="YYYY-MM-DD"
                  valueFormat="YYYY-MM-DD" :disabled="true" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="分发数量">
                <a-input v-model="distributeNum" placeholder="请输入" :disabled="true" /> <span
                  style="position: absolute; right: -36px;width: 29px;">条</span>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="分发类型">
                <a-input v-model="distributeType" placeholder="请输入" :disabled="true" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!-- 表格展示 -->
      <div class="table-page-content">
        <z-table ref="table" rowKey="key" :showAlert="false" :expandIconColumnIndex="1" :showSelection="false"
          :loading="loading" :columns="columns" :dataSource="pageData" @change="onTableChange">
          <template slot="dataSource" slot-scope="text">
            <span v-if="text == 1">人工推送任务</span>
            <span v-if="text == 2">自动推送任务</span>
          </template>
          <template slot="mobileDistributeStatus" slot-scope="text">
            <span v-if="text == 0">未下发</span>
            <span v-if="text == 1">待封堵</span>
            <span v-if="text == 2">封堵成功</span>
            <span v-if="text == 3">封堵失败</span>
          </template>
          <template slot="unicomDistributeStatus" slot-scope="text">
            <span v-if="text == 0">未下发</span>
            <span v-if="text == 1">待封堵</span>
            <span v-if="text == 2">封堵成功</span>
            <span v-if="text == 3">封堵失败</span>
          </template>
          <template slot="telecomDistributeStatus" slot-scope="text">
            <span v-if="text == 0">未下发</span>
            <span v-if="text == 1">待封堵</span>
            <span v-if="text == 2">封堵成功</span>
            <span v-if="text == 3">封堵失败</span>
          </template>
        </z-table>
      </div>
      <div class="btnBox">
        <template v-if="flag == 1">
          <a-button @click="onBack()">取消</a-button>
          <a-button type="primary" style="margin-left:20px;" :loading="bntLoading" @click="onSend()">分发</a-button>
        </template>
        <a-button v-else type="primary" @click="onBack()">返回</a-button>
      </div>
    </a-card>
  </div>
</template>

<script>
import { jf_db_distributeList, jf_db_manualDistribute } from '@/api/plugging/authority/jf.js'
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 17 },
      loading: false,
      bntLoading: false,
      visible: false,
      reloading: false,
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      distributeType: '手工分发',
      distributeNum: '',
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) => {
            return `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
          }
        },
        {
          title: '封堵地址',
          dataIndex: 'fraudUrl',
          align: 'center',
          // width: 100,
          customRender: (text, record) => {
            return (
              <j-ellipsis value={text} length={20} />
            )
          }
        },
        {
          title: '数据来源',
          dataIndex: 'dataSource',
          align: 'center',
          // width: 120,
          scopedSlots: { customRender: 'dataSource' },
        },
        {
          title: '发现时间',
          dataIndex: 'discoveryTime',
          align: 'center',
          // width: 120,
        },
        {
          title: '推送时间',
          dataIndex: 'pushTime',
          align: 'center',
          // width: 100,
        },
        {
          title: '分发时间',
          dataIndex: 'distributeTime',
          // width: 100,
          align: 'center',
        },
        {
          title: '移动分发状态',
          dataIndex: 'mobileDistributeStatus',
          // width: 120,
          align: 'center',
          scopedSlots: { customRender: 'mobileDistributeStatus' },
        },
        {
          title: '联通分发状态',
          dataIndex: 'unicomDistributeStatus',
          // width: 120,
          align: 'center',
          scopedSlots: { customRender: 'unicomDistributeStatus' },
        },
        {
          title: '电信分发状态',
          dataIndex: 'telecomDistributeStatus',
          // width: 120,
          align: 'center',
          scopedSlots: { customRender: 'telecomDistributeStatus' },
        },
        {
          title: '批次号',
          dataIndex: 'batchNo',
          // width: 100,
          align: 'center',
        },
      ],
      pageData: {
      },
      flag: this.$route.query.flag,
      batchNoList: this.$route.query.batchNoList,
      rangTime: this.$route.query.rangTime,
    }
  },
  created() {
    this.pageFilter.batchNo = this.batchNoList.join()
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10,
      }
      this.time1 = []
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      jf_db_distributeList(this.pageFilter).then((res) => {
        if (res.success) {
          this.pageData = res.result ? res.result : {}
          this.distributeNum = this.pageData.total
          this.loading = false
        } else {
          this.$message.success(res.message)
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warning(res.message)
        })
    },
    onSend() {
      this.bntLoading = true
      jf_db_manualDistribute({ batchsList: this.batchNoList }).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.bntLoading = false
          this.onBack()
        } else {
          this.$message.warning(res.message)
          this.bntLoading = false
        }
      })
        .catch((e) => {
          this.bntLoading = false
          this.$message.warning(res.message)
        })
    },
    onBack() {
      this.$router.go(-1)
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },
  },
}
</script>
<style lang="less" scoped>
.btnBox {
  margin-top: 40px;
  display: flex;
  justify-content: center
}

/deep/.ant-card-body {
  padding: 15px 24px;
}

/deep/.ant-row {
  margin-bottom: 5px;
}
</style>
